<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h5>侦听器额外配置</h5>
        <ul>
            <li>immediate: boolean 默认值 false , 控制侦听器在页面首次进行加载时是否会进行回调函数执行</li>
            <li>deep: boolean 默认值为 false , 对引用数据类型进行属性观察(深度观察)</li>
        </ul>
        <p>user:{{ user }}</p>
        <input type="button" value="重置user" @click="user={ name:'jack',age:33 }">
        <input v-model="user.name" type="text" />
        <input v-model.number="user.age" type="number" />
        <hr>
        <input type="text" v-model="wd">
        <input type="button" value="搜索" @click="findWdResult()">
        <ul>
            <li v-for="item in result">
                {{ item.q }}
            </li>
        </ul>
    </div>
    <script src="../assets/jsonp/fetch-jsonp.js"></script>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        console.log(fetchJsonp)
        createApp({
            data(){
                return {
                    user:{
                        name:"tom",
                        age:23
                    },
                    wd:"html",
                    result:[]
                }
            },
            watch: {
                user:{
                    handler(nv,ov){
                        console.log("user被修改:",nv,ov)
                    },
                    deep:true,
                    immediate:true
                },
                wd:{
                    handler(nv,ov){
                        if(nv!=ov){
                            this.findWdResult();
                        }
                    },
                    immediate:true
                }
            },
            methods: {
                findWdResult() {
                    // console.log(1)
                    // jsonp
                    // https://www.baidu.com/sugrec?prod=pc&wd=csss
                    fetchJsonp(`https://www.baidu.com/sugrec?prod=pc&wd=${this.wd}`,{
                        jsonpCallback:"cb"
                    }).then((response)=>{
                        console.log(response)
                        console.log(response.json())
                        return response.json();
                    }).then((data)=>{
                        this.result = data.g
                    })
                }
            },
        }).mount("#app")
    </script>
</body>
</html>